<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* iclient-plot-leaflet (https://iclient.supermap.io/web/libs/plotting/leaflet/12.0.0.0/iclient-plot-leaflet.min.js)
*********************************************************************-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <x-Frame-options value="ALLOW-FROM"></x-Frame-options>
    <title data-i18n="resources.title_addfile"></title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary" style="position: absolute;top: 15px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;">
    <div class='panel-heading' id="panelheading">
        <h5 class='panel-title text-center' data-i18n="resources.title_addfile"></h5></div>
    <div class='panel-body content' id="panelbodycontent">
        <div class='panel'>
            <div class='input-group' style=" margin-bottom: 10px;">
                <input type="file" id="file" name="file" style="margin-left: 50px"/>
            </div>
        </div>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_overlay" onclick="add()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_addToLater" onclick="addtolayer()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_open" onclick="openSmlData()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearLayers()"/>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap,widgets.alert,fileupLoad" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var url = host + "/iserver/services/map-china/rest/maps/China_4326";
    var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
    var map;
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [35,104],
        maxZoom: 18,
        zoom: 3
    });
    new L.supermap.TiledMapLayer(url).addTo(map);
    var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
    plottingLayer.addTo(map);
    var drawControl = L.supermap.plotting.drawControl(plottingLayer);
    drawControl.addTo(map);
    var editControl = L.supermap.plotting.editControl();
    editControl.addTo(map);
    var plotting = L.supermap.plotting.getControl(map, serverUrl);
    var sitDataManager = plotting.getSitDataManager();

    function add() {
        widgets.alert.clearAlert();
        sitDataManager.addSmlFile('file', true, function(evt){
            if(evt.success){
                widgets.alert.showAlert("叠加态势图成功！",true);
            } else {
                widgets.alert.showAlert("叠加态势图失败！",true);
            }
        });
    }

    //叠加到指定图层
    function addtolayer(){
        widgets.alert.clearAlert();
        sitDataManager.addSmlFileToLayer('file', "plot", function(evt){
            if(evt.success){
                widgets.alert.showAlert("叠加态势图成功！",true);
            } else {
                widgets.alert.showAlert("叠加态势图失败！",true);
            }
        });
    }

    //打开并上传到服务器
//    function openFileToServer() {
//        widgets.alert.clearAlert();
//        sitDataManager.openSmlFile('file', function(evt){
//            if(evt.success){
//                widgets.alert.showAlert("打开态势图成功！",true);
//            } else {
//                widgets.alert.showAlert("打开态势图失败！",true);
//            }
//        });
//    }

   //打开本地态势图文件不上传服务器
    function openSmlData() {
        widgets.alert.clearAlert();
        var files = document.getElementById("file").files;
        if (files.length === 0) {
            widgets.alert.showAlert("请选择态势图文件！",true);
            return;
        }else{
            var reader = new FileReader();
            reader.readAsText(files[0]);
            reader.onload = function (e) {
                function strToObj(str){//这里是处理json格式不是很标准的情况
                    var jsonObj = (new Function("return" + str))();
                    return jsonObj;
                }
                sitDataManager.openSmlData(strToObj(e.target.result));
            }
        }

    }

    function clearLayers() {
        widgets.alert.clearAlert();
        for (var i = 0; i < map.getPlottingLayers().length; i++) {
            map.getPlottingLayers()[i].removeAllFeatures();
        }
    }
    $(document).ready(function(){
        $('#panelheading').click(function(){
            $('#panelbodycontent').toggle();
        });
    });
</script>
</body>
</html>
